<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <style>
        select{
            font-size: 45px;
        }
    </style>

    <h1>Cascading Dropdown Example</h1>

    <h1>      太难了  复杂 </h1>

    <form name="form1" id="form1" action="/action_page.php">
        Subjects: 
        <select name="subject" id="subject">
            <option value="" selected="selected">Select subject</option>
        </select>
        <br><br>
        Topics: 
        <select name="topic" id="topic">
            <option value="" selected="selected">Please select subject first</option>
        </select>
        <br><br>
        Chapters: 
        <select name="chapter" id="chapter">
            <option value="" selected="selected">Please select topic first</option>
        </select>
        <br><br>
        <input type="submit" value="Submit">
    </form>

</body>
<script>
    var subjectObject = {
        "Front-end": {
            "HTML": ["Links", "Images", "Tables", "Lists"],
            "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
            "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
        },
        "Back-end": {
            "PHP": ["Variables", "Strings", "Arrays"],
            "SQL": ["SELECT", "UPDATE", "DELETE"]
        }
    }
    window.onload = function () {
        var subjectSel = document.getElementById("subject");
        var topicSel = document.getElementById("topic");
        var chapterSel = document.getElementById("chapter");
        // 将 subjectObject 的数据转换成对象赋值给 subjectSel
        console.log("subjectSel.options.length:    "+subjectSel.options.length);

        // 循环增加 option 
        for (let x in subjectObject) {
            console.log("x:   "+x);  // 输出 Front-end 和 back-end
            console.log("subjectSel.options.length:    "+subjectSel.options.length);
            subjectSel.options[subjectSel.options.length] = new Option(x, x);
        }
        console.log("subjectSel.options.length:    "+subjectSel.options.length);




        console.log(subjectSel);


        subjectSel.onchange = function () {
            chapterSel.length = 1;
            topicSel.length = 1;
            //display correct values

            // 输出:    <option value="value">哈哈哈哈</option>
            console.log( new Option("哈哈哈哈", "value"));
            console.log("this.value:    "+this.value);
            for (let y in subjectObject[this.value]) {
                console.log(subjectObject[this.value]);
                console.log("y:    "+y);
                console.log("topicSel.options.length:    "+topicSel.options.length);
                topicSel.options[topicSel.options.length] = new Option(y, y);
            }
        }
        topicSel.onchange = function () {
            chapterSel.length = 1;
            //display correct values
            let z = subjectObject[subjectSel.value][this.value];
            for (let i = 0; i < z.length; i++) {
                chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
            }
        }
    }
</script>
</html>